<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>无限级联</title>
</head>
<body>
<select class="game" >
    <option >选择游戏</option>
</select>
<select  class="province">
    <option >选择省份</option>
</select>
<select class="area" >
    <option >选择大区</option>
</select>
<script src="js/jquery-3.1.1.js"></script>
<script>
    $(function () {
        /*1.加载游戏相关的数据
         1.1通过ajax加载数据
        **/
        /*1.2获取每一个slect标签*/
        var game = $('.game');
        var province = $('.province');
        var area = $('.area');

        var url = 'data/game.json';

        /*1.3就是通过网络请求设置game下的数据*/
        $.ajax({
            /*1.31类型*/
            type:'GET',
            url:url,
            success:function (res) {
                /*拿到返回数据，遍历数据设置对应的值
                * 返回的数组的长度有多少个，就需要添加多少option*/
                $.each(res,function (index,obj) {

                    /*1.32每次遍历一次需要创建一个option节点,绑定value位obj.id*/
                    var tag = $('<option value="'+obj.id+'">'+obj.name+'</option>');
                    /*1.33添加节点*/
                    game.append(tag);

                })
            }
        });
        /*2.当选中的游戏发生改变的时候，我们应该加载省份数据*/
        game.on('change',function () {
            alert(0);
//            根据前面选中value来确定加载数据，确定url
            var id = $(this).val();
            var url = 'data/'+id+'.json';

            /*2.1发送请求*/
            $.ajax({
                /*1.31类型*/
                type:'GET',
                url:url,
                success:function (res) {
                    /*拿到返回数据，遍历数据设置对应的值
                     * 返回的数组的长度有多少个，就需要添加多少option*/
                    $.each(res,function (index,obj) {

                        /*1.32每次遍历一次需要创建一个option节点*/
                        var tag =  $('<option value="'+obj.id+'">'+obj.name+'</option>');
                        /*1.33添加节点*/
                        province.append(tag);




                    })

                }

            })


        })
        /*3.当选中省份变化的时候，加载大区数据*/
        province.on('change',function () {

//            根据前面选中value来确定加载数据，确定url
            var id = $(this).val();
            var url = 'data/'+id+'.json';

            /*2.1发送请求*/
            $.ajax({
                /*1.31类型*/
                type:'GET',
                url:url,
                success:function (res) {
                    /*拿到返回数据，遍历数据设置对应的值
                     * 返回的数组的长度有多少个，就需要添加多少option*/
                    $.each(res,function (index,obj) {

                        /*1.32每次遍历一次需要创建一个option节点*/
                        var tag = $('<option value="'+obj.id+'">'+obj.name+'</option>');
                        /*1.33添加节点*/
                        area.append(tag);
                    })

                }

            })


        })
    })
</script>
</body>
</html>